<template>
  <div class="footer">
    <div class="title">全国艺术职业人才在线培训平台</div>
    <ul class="tc">
      <li v-for="item in linkList" :key="item.name">
        <router-link :to="item.link">{{ item.name }}</router-link>
      </li>
    </ul>
    <p class="tc mb15 mt15 message">
      <span>地址：北京市朝阳区高碑店村一区40-9</span>
      <span>咨询电话：010-59440991（座机）</span>
      <span>18612387770（手机）</span>
    </p>
    <p class="tc mb30">京ICP备2021029943号-1</p>
    <div class="footer-bottom"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      linkList: [
        { name: "首页", link: "" },
        { name: "通知公告", link: "" },
        { name: "政策文件", link: "" },
        { name: "精品课程", link: "" },
        { name: "专家团队", link: "" },
        { name: "联系我们", link: "" },
      ],
    };
  },
};
</script>

<style>
.footer {
  margin-top: 40px;
  background: #484848;
}
.title {
  width: 95%;
  padding: 10px 0;
  margin: 0 auto;
  font-size: 22px;
  margin-top: 20px;
  margin-bottom: 15px;
  padding-bottom: 20px;
  font-weight: bold;
  border-bottom: 1px solid #5d5d5d;
  color: #f8f8f8;
  text-align: center;
}
.tc {
  text-align: center;
}
.mb15 {
  margin-bottom: 15px;
}
.mt15 {
  margin-top: 15px;
}
.mb30 {
  margin-bottom: 30px;
}
.footer ul li {
  display: inline-block;
  padding: 0 15px;
  line-height: 20px;
  color: #fff;
}
.footer p {
  color: #fff;
}
.message span {
  margin-right: 10px;
}
.footer-bottom {
  height: 30px;
  line-height: 30px;
  background: #333;
}
@media screen and (max-width: 760px) {
  .footer ul li {
    margin-bottom: 5px;
  }
  .message {
    display: flex;
    flex-wrap: wrap;
  }
  .message span {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>